<template>
  <div class="el-main-right">
    <div class="el-main-right-top el-main-right-top-border">
       <div class="el-main-right-top-booton">
              <!-- <el-button type="success">登录</el-button> -->
              <div class="dengluzhuce">
                登录     
            <!-- <el-button type="success"><router-link to="/login/zhuce" exact>注册</router-link>  </el-button> -->
            <router-link to="/login/zhuce" >注册</router-link> </div>
            </div>
    </div>
    <div class="el-main-right-con">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="username">
          <el-input placeholder="请输入真实姓名" type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="uphonenum">
          <el-input  placeholder="请输入手机号" v-model="ruleForm.uphonenum"></el-input> 
        </el-form-item>
      <!-- <div class="el-phonecod">获取验证码</div> -->
          <el-form-item label="手机验证码" prop="checkCode">
          <el-input class="input-area" placeholder="请输入验证码" v-model="ruleForm.checkCode"> </el-input>  <el-button class="el-phonecod"  v-show="show" @click="getCode()" plain>获取验证码</el-button><span v-show="!show" class="count">{{count}} s</span>
        </el-form-item>
        
        <el-form-item label="身份证号" prop="uidcard">
          <el-input placeholder="请输入证件号" v-model="ruleForm.uidcard"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <div>
            <select>
              <option value="使用其他有效证件">使用其他有效证件</option>
              <option value="中国人民解放军军人身份证件">中国人民解放军军人身份证件</option>
              <option value="港澳居民来往内地通行证">港澳居民来往内地通行证</option>
              <option value="台湾居民来往大陆通行证">台湾居民来往大陆通行证</option>
              <option value="中华人民共和国护照">中华人民共和国护照</option>
            </select>
          </div>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="messlogin('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="el-main-right-cencer">
        <router-link to="/login/pswdlogin" exact>按密码登录</router-link>
      </div>
      <div class="el-main-right-footer">
        <router-link to="/login/chongzhipswd" exact>忘记密码</router-link>
        
         账号申诉</div>
    </div>
  </div>
</template>


    <script>
import { log } from 'util';
export default {
  data() {
  
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
    setTimeout(() => {
         var reg=/^[1-9]{1}[0-9]{10}$/
         if (!(value.length==11)) {
          callback(new Error("必须11位数"));
        } else {
          if (!reg.test(value)) {
            callback(new Error("请输入数字"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkIdcard = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件不能为空"));
      }
        setTimeout(() => {
        var reg=/^[1-9]{1}[0-9Xx]{17}$/
       
        if (!(value.length==18)) {
          callback(new Error("必须18位数"));
        } else {
          if (!reg.test(value)) {
            callback(new Error("请输入正确格式"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入真实姓名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
      
    var checkPhonecode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      setTimeout(() => {
         var reg=/^[1-9]{1}[0-9]{3}$/
         if (!(value.length==4)) {
          callback(new Error("必须4位数"));
        } else {
          if (!reg.test(value)) {
            callback(new Error("请输入数字"));
          } else {
            callback();
          }
        }
      }, 1000);
    };

    return {
       show: true,
       show: true,
      count: "",
      timer: null,
      timelist: [],
      note: {
        backgroundImage: "url(" + require("../../assets/beijing.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "25px auto",
        marginTop: "5px"
      },
      ruleForm: {  
        username: "", 
        uphonenum: "",
        uidcard: "",
        checkCode: "",
           
      },
     
      rules: {
    
        username: [{ validator: validateName, trigger: "blur" }],
        uphonenum: [{ validator: checkPhone, trigger: "blur" }],
        uidcard: [{ validator: checkIdcard, trigger: "blur" }],
        checkCode: [{ validator: checkPhonecode, trigger: "blur" }],
      }
    };
  },
  methods: {
       
     getCode: function() {
      this.$http.get("http://"+this.GLOBAL.ipAddress+":8001/user/logincode").then(function(data) {});
      // console.log(this.ruleForm.name)
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

     messlogin: function(formName) {
         console.log(this.ruleForm.username)
         console.log(this.ruleForm.uphonenum)
         console.log(this.ruleForm.uidcard)
         console.log(this.ruleForm.checkCode)
          this.$refs[formName].validate(valid => {
        if (valid) {
      this.$http
        .post("http://"+this.GLOBAL.ipAddress+":8001/user/messlogin", this.ruleForm)
        .then(function(data) {                 
          console.log(data.bodyText);
          if (data.bodyText == "success") {

         var ses=window.localStorage;
         var uname=this.ruleForm.username 
         var uphonenum=this.ruleForm.uphonenum
         var uidcard=this.ruleForm.uidcard
         ses.setItem('uname',uname)
         ses.setItem('uphonenum',uphonenum) 
         ses.setItem('uidcard',uidcard);
         this.$router.push({path:'/personageindex'})
          }else if (data.bodyText == "failed1"){
           
               this.$message({
          showClose: true,
          message: '由于你违法操作已被禁用，请联系管理人员解除禁用',
          type: 'warning'
        });
          } if(data.bodyText == "failed"){
           
              this.$message({
          showClose: true,
          message: '用户信息错误，请仔细填写',
          type: 'error'
        });
          }
        });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>


<style scoped>
.dengluzhuce{
  color: #4FC3F7;
  font-size: 25px;
  font-weight: bolder;

}
a{
  text-decoration: none;
  color: #4FC3F7;
}
.el-header {
  background-color: greenyellow;
  color: #333;
  text-align: center;
  line-height: 150px;
  font-family: "STXingkai";
  font-size: 50px;
  position: relative;
}
.el-header-area {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  font-family: "STXingkai";
  font-size: 50px;
  line-height: 150px;
  position: absolute;
  height: 150px;
  width: 80%;
  right: 150px;
  top: 50px;
}

.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left: 60px;
}
/* ********************************* */

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: relative;
}

.el-main-right {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 180px;
}
.el-main-right-con {
  position: absolute;
  top: 150px;
}
.el-main-right-top {
  position: absolute;
  width: 500px;
  height: 100px;
}
.el-main-right-cencer {
  position: absolute;
  top: 300px;
  right: 80px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-footer {
  position: absolute;
  top: 430px;
  right: -110px;
  font-size: 15px;
  color: #4FC3F7;
}
.el-main-right-top-booton {
  position: absolute;
  left: 10px;
  top: -25px;
}
.el-main-right-top-border {
  border-bottom: 3px solid #969696;
}
.el-main-footer {
  position: absolute;
  left: 200px;
}

.el-main-left {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 880px;
  margin-top: -700px;
}
.el-left-img {
  position: absolute;
  left: 160px;
  top: 130px;
}
.el-left-img-small {
  position: absolute;
  left: 130px;
  top: 300px;
}

.el-left-ziti {
  position: absolute;
  left: 180px;
  top: 270px;
}
.el-left-ziti1 {
  position: absolute;
  left: 180px;
  top: 290px;
}
.el-left-ziti2 {
  position: absolute;
  left: 140px;
  top: 340px;
  font-size: 20px;
  font-weight: 300;
}
.el-left-ziti3 {
  position: absolute;
  left: 180px;
  top: 370px;
  font-size: 20px;
  font-weight: 300;
}

/* .border {
  border: 1px solid red;
} */
body > .el-container {
  margin-bottom: 0px;
  margin-top: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-phonecode{
width: 10px;
height: 10px;
  color: #40c4ff;
}
.input-area{
  /* position: absolute;
  left: 10px; */
  width: 120px;

}
</style>
    
    
    
    


